import AMapLoader from "@amap/amap-jsapi-loader";

export const mapHooks = () => {
    let map: any = null;
    let AMapObj: any = null;
    let heatmap: any = null; // 热力图实例化对象

    // 初始化地图
    const initMap = async (mapId: string) => {
        console.log("mapId", "mapId");
        window._AMapSecurityConfig = {
            securityJsCode: "「5b0d768e7e365bfaccaa389d3bd6e660」",
        };
        await AMapLoader.load({
            key: "88435800c671d6326738bfd9cf65b1ef", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [
                "AMap.HeatMap", // 热力图插件
                "AMap.IndexCluster",

                "AMap.ToolBar", // 地图缩放工具条
                "AMap.Scale", // 右下角缩略图插件 比例尺

                "AMap.Geocoder",
                "AMap.InfoWindow",
                "AMap.MoveAnimation",
            ],
        })
            .then((AMap) => {
                AMapObj = AMap;
                map = new AMap.Map(mapId, {
                    // 设置地图容器id
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 11, // 初始化地图级别
                    center: [116.397428, 39.90923], // 初始化地图中心点位置
                });

                heatmap = new AMap.HeatMap(map, {
                    radius: 25, //给定半径
                    opacity: [0, 0.8],
                });
            })
            .catch((e) => {
                console.log(e);
            });

        return {
            map, // map实例化对象
            AMapObj, // 构造方法
            heatmap, // 热力图插件
        };
    };

    function destroyMap() {
        map.value && map.value.destroy();
    }

    onUnmounted(() => {
        destroyMap();
    });

    return {
        initMap,
    };
};
